<template>
	<view class="work-container">

		<view class="page-bg pt-4">
			<view class="py-4" style="position: relative;">
				<view class="text-center">
					<text style="font-size: 34rpx; font-weight: 700;">客服</text>
				</view>
			</view>

			<!-- 		<view class="p-3 flex">
			<view>
				<u--image src="/static/images/ui/index/chat-head.png" width="96rpx" height="96rpx"></u--image>
			</view>
			<view class="ml-3">
				<view class="font-13 mb-3" style="color:#333333">智能客服</view>
				<view class="msg-box">
					<view class="font-13 text-bold">猜你想问</view>
					<view class="bt-line-1 my-2"></view>
					<view class="red-line">工资发放日期</view>
					<view class="red-line">借支规则</view>
					<view class="red-line">如何申请发放工资</view>
				</view>
			</view>
		</view> -->
			<!-- 		<view class="bt-footer">
			<view class="flex justify-start flex-1">
				 <u--input
				    placeholder="请输入内容"
				    border="surround"
					shape="circle"
					:customStyle="{backgroundColor:'#F7F7F7'}"
				    clearable
				  ></u--input>
				  <view class="ml-3">
					  <uni-icons color="#999999" type="plus" size="36"></uni-icons>
				  </view>
			</view>
		</view> -->
			<view class="bgContain">
				<view v-for="(item,index) in list" :key="index">
					<view class="list_item">
						<view class="list_item_top">
							<view class="">{{index+1}}.{{item.issue}}</view>
							<view class="" @click="item.isOpen = !item.isOpen">
								<image v-if="item.isOpen" src="/static/images/ui/icon/icon1.png" mode=""
									style="width: 42rpx;height: 42rpx;"></image>
								<image v-else src="/static/images/ui/icon/icon2.png" mode=""
									style="width: 42rpx;height: 42rpx;"></image>
							</view>
						</view>
						<view class="list_item_bottom" v-if="item.isOpen">
							{{item.answer}}
						</view>
					</view>
				</view>
			</view>
			<view class="" style="height: 120rpx;"></view>
			<view class="kf_btn" @click="callPhone()">
				<image src="/static/images/ui/icon/icon3.png" mode=""></image>
				联系客服
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getQuesList
	} from "@/api/entry.js"
	export default {
		data() {
			return {
				list: []
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			async getList() {
				getQuesList({page:1,pageSize:10000}).then(res => {
					let data = res.data.rows
					data.map(item => {
						item.isOpen = false
						return item
					})
					this.list = data
				})
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: '010 52470181'
				});
			}
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		min-height: 100%;
		height: auto;
	}

	view {
		line-height: inherit;
	}

	/* #endif */

	.page-bg {
		height: 820rpx;
		background-image: url('/static/images/ui/index/bg.png');
	}

	.msg-box {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx 26rpx;
	}

	.red-line {
		font-size: 26rpx;
		color: #ee3636;
		line-height: 2em;
	}

	.bgContain {
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(235, 235, 235, 0.50);
		margin: 40rpx 24rpx;
		padding: 1rpx 24rpx;
		box-sizing: border-box;

		.list_item {
			border-bottom: 2rpx solid #f2f2f2;
			padding-bottom: 28rpx;

			.list_item_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 32rpx;
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 700;
				color: #1d2129;
			}

			.list_item_bottom {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #4e5969;
				margin-top: 18rpx;
			}
		}

	}

	.kf_btn {
		width: 702rpx;
		height: 90rpx;
		background: #ee3636;
		border-radius: 8rpx;
		position: fixed;
		left: 24rpx;
		right: 24rpx;
		bottom: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: center;
		color: #ffffff;

		image {
			width: 42rpx;
			height: 42rpx;
		}
	}
</style>